import { observer } from "mobx-react";
import { Row, Col } from 'antd';

import './index.less';
@observer
export default class FieldProps extends React.Component {
    render() {
        const { store } = this.props;
        const { autoSaveDatasvisible } = store;
        const datas = store.autoSaveDatas.filter(r => {return r.dataJson});
        const length = datas.length;
        return (
            <div className="edc-field-props" style={autoSaveDatasvisible ? {} : { right: -320 }}>
                <div className={`toggle${autoSaveDatasvisible ? '' : ' toggle-hidden'}`} onClick={store.toggle}></div>
                <ol className="edc-tab-nav">历史版本

                </ol>
                {<div className="edc-tab-content" >
                    {/* <Table value={dsTable} style={{ width: '100%' }} options={tableOptions} onChange={changeDataSetTable}></Table> */}
                    {datas.map((field,index) => {
                        return (
                            <li onClick = {() => store.bindDatasource(JSON.parse(field.dataJson))}>
                                <Row>
                                    <Col span={8}>
                                        <span dangerouslySetInnerHTML={{ __html: "版本"+ (length - index) }}></span>
                                    </Col>
                                    <Col span={16}>
                                    {field.createDate + " " + field.createTime}
                                    </Col>
                                </Row>
                            </li>
                        )
                    })
                    }
                </div>}
            </div>
        )
    }
    clickItem = (key) => {
        const { store } = this.props;
        const { fieldProps } = store;
        fieldProps.selectedTabKey = key;
    }
}